<div id="typeTable">
    <div class="layui-card layadmin-header">
        <div class="layui-breadcrumb" lay-filter="breadcrumb" style="visibility: visible;">
            <a lay-href="">系统管理</a><span lay-separator="">/</span>
            <a><cite>路径管理</cite></a>
        </div>
    </div>
    <div class="demoTable">
        搜索图片类型：
        <div class="layui-inline">
            <input name="tptype" class="layui-input" id="tptype" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        <button id="add" class="layui-btn">添加</button>
        <script id="toolbarDemo" type="text/html">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script>
    </div>

    <table class="layui-hide" id="dataTable"></table>
</div><!-- 用户列表部分 -->


<script>
    var tableIns;
    var openIndex;//用来关闭弹出窗口
    layui.use(["table", "jquery", "form", "laydate", "upload"], function () {//引入layui模块
        var table = layui.table, $ = layui.jquery, form = layui.form, laydate = layui.laydate, upload = layui.upload;//初始化
        tableIns = table.render({
            /* 构建员工列表 */
            elem: '#dataTable'
            , url: '/url/geturl'
            , page: true
            , limit: 8
            , limits: [8, 16, 24]
            , cols: [[
                {type: 'numbers'}
                , {field: 'tpurl', title: '图片路径'}
                , {field: 'tptype', title: '图片类型'}
                , {fixed: 'right', title: '操作', align: 'center', width: 140, toolbar: '#barDemo'}
            ]]
            ,id:'testReload'
        });
        var $ = layui.$, active = {
            reload: function(){
                var tptype = $('#tptype');
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        tptype: tptype.val(),
                    }
                });
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //调用添加功能了！
        $("#add").click(function () {
            $.ajax({
                url:"/url/add",
                success:function (html) {
                    openIndex= layer.open({
                        title:"添加图片路径信息",
                        type:1,
                        area:['720px','540px'],
                        content:html
                    });
                }
            });
        });
    //监听工具条
        //如果当前页面只有一个表格的话，可以直接监听tool，那么如果有多个，需要在table上设置layui-filter=a,并且table.on('tool(a)'),这样的方式
        table.on('tool', function (obj){
            var data = obj.data;
            if (obj.event === 'detail') {//点击查看按钮显示数据
                layer.open({
                    title: data.title
                    , type: 1
                    , area: '500px'
                    , content: '<fieldset class="layui-elem-field layui-field-title">\n' +
                    '  <legend>作者 - ' + data.author + '</legend>\n' +
                    '  <div class="layui-field-box">\n' +
                    ' ' + data.content + '\n' +
                    '  </div>\n' +
                    '</fieldset>'
                });
            } else if (obj.event === 'del') {//点击删除
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({//调用去后台进行ajax删除
                        url: "/url/dellook",
                        data: {"opr": "del", "id": data.id},
                        type: "post",
                        dataType: "json",
                        success: function (j) {
                            if (j.code == 0) {
                                layer.msg(j.msg);
                                obj.del();
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {//修改并赋值
                $.ajax({
                    url:"/url/update",
                    success:function (html) {
                        openIndex=layer.open({
                            title:"修改用户信息",
                            type:1,
                            area:['720px','540px'],
                            content:html
                        });
                        //完成赋初始值
                        form.val("Car",data);
                    }
                });
            }
        });


        //添加按钮，当点击时，将表单还愿，并且修改使其功能为添加addUser
        $("#add").click(function () {
            $("#reset").click();
            $("#userForm input[name=opr]").val("addUser");
            $("#formTitle").html("录入用户信息");
            $("#userTable").toggle();
            $("#userForm").toggle();
        });
        //返回按钮
        $("#back").click(function () {
            $("#userTable").toggle();
            $("#userForm").toggle();
        });
        //表单监听，监听提交
        form.on("submit(add)", function (data) {//先进行表单验证，如果验证不通过不能进入此处代码
            $.post("userServlet", $("#faqform").serialize(), function (data) {
                if (data.code==0) {
                    layer.msg(data.msg);
                    tableIns.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });//重新载入表格
                } else {
                    layer.msg(data.msg);
                }
                $("#userTable").toggle();
                $("#userForm").toggle();
            }, "json");
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        /* end */
    });

</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

